import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
} from '@storybook/addon-docs/blocks';

import * as FileUploaderStories from './FileUploader.stories.js';

<Meta of={FileUploaderStories} />

# FileUploader

## Usage

The `<FileUploader>` component is a wrapper around [vue2-dropzone](https://www.npmjs.com/package/vue2-dropzone). Use this component to allow a user to upload a file. `<FileUploader>` is an "invisible" component. It handles the file uploading under-the-hood, but does not provide the UI that shows file progress or lists the uploaded files.

When using `<FileUploader>`, the drag-and-drop target area will expand to fill it's parent component. In the following example, the drag-and-drop target area will be a 300x300 pixels area.

```html
<div style="width: 300px; height: 300px;">
	<FileUploader ... />
</div>
```

Use [FileUploadProgress](#/component/FileUploadProgress) to show the progress of files being uploaded.

```html
<div>
	<FileUploadProgress
		v-for="(file, i) in files"
		:key="i"
		cancelUploadLabel="Cancel Upload"
		:errors="file.errors"
		:name="file.name"
		:progress="file.progress"
		@cancel="remove(i)"
	/>
	<FileUploader :files="files" ... />
</div>
```

Always provide a button to open the file browser for users who can't use the drag-and-drop area. Use a `ref` to access methods on `<FileUploader>`.

```html
<template>
	<div>
		Drag and drop files here or
		<button @click="openFileBrowser">upload a file</button>
		<FileUploader ref="exampleUploader" ... />
	</div>
</template>

<script>
	export default {
		methods: {
			openFileBrowser() {
				this.$refs.exampleUploader.openFileBrowser();
			},
		},
	};
</script>
```

<Primary />
<ArgTypes />
